<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'dashboard',
  data () {
    return {
      msg: 'Welcome to Dashboard',
      projectId: 1,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        refreshInterval: ''
      },
      formLabelWidth: '120px',
      allTopo: [],
      selectedTopoId: null
    }
  },
  mounted () {
    this.requestTopo()
  },
  methods: {
    requestTopo () {
      this.$http.get('/project/configuration/find?project_id=1').then((res) => {
        this.allTopo = res.data
      })
    },
    addProjectTopo () {
      this.$http.post('/project/configuration/create', {
        projectId: this.projectId,
        name: this.form.name,
        refreshInterval: this.form.refreshInterval
      }).then((res) => {
        this.requestTopo()
      })
      this.dialogFormVisible = false
    },
    editTopo () {
      if (!this.selectedTopoId) {
        this.$message('请先点击选中画面')
        return
      }
      this.goMxgraph()
    },
    goMxgraph () {
      window.open('/static/mxgraph/javascript/examples/grapheditor/www/index.html?topoid=' + this.selectedTopoId + '&projectId=' + this.projectId, '_blank')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
.operation {
  text-align: right;
  padding-right: 20px;
}
.topo-list {
  text-align: center;
}
.topo-item {
  width: 170px;
  height: 126px;
  padding: 25px;
  float: left;
  margin: 0 15px;
  background-color: #e9edef;
  cursor: pointer;

  img {
    vertical-align: middle;
  }
}
.topo-item.selected {
  background-color: #B4C8EF;
}
</style>
